<template>
  <div>
    <!-- <basic-container>
      <avue-search :option="searchOption" v-model="searchObj"></avue-search>
    </basic-container> -->
    <basic-container>
      <avue-crud :option="option" :data="data">
        <template slot="menu" slot-scope="{}">

          <router-link :to="{path:'/report/capacity_bank'}">
            <el-button type="text" size="small">
              查看详情
            </el-button>
          </router-link>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataOption: {
        span: 4,
        data: [
          {
            count: '23,050',
            title: '授信额度'
          },
          {
            count: '13,650',
            title: '用信额度'
          },
          {
            count: '3,125',
            title: '随薪贷'
          },
          {
            count: '13,040',
            title: '存款金额'
          },
          {
            count: '43,300',
            title: '代发工资金额'
          },
          {
            count: '5,760',
            title: '手机银行开户数'
          }
        ]
      },
      data: [
        {
          name: '北京云集汇通科技有限公司',
          address: '山东省潍坊市寒亭区北海路3777号45号楼',
          people: '50-99人',
          gxd: 100,
          url: 'http://www.yunjihuitong.com',
          fr: '刘金发',
          sbh: '91110108MA00BKBJ7F',
          hy: '科技推广和应用服务业',
          zb: '250万人民币',
          phjrzs: 120,
          qygx: 100,
          zhyw: 20
        }
      ],
      searchObj: {
        hy: [0],
        gm: 5
      },
      searchOption: {
        column: [
          {
            label: '企业行业',
            prop: 'hy',
            dicData: [
              {
                label: '农、林、牧、渔业',
                value: 0
              },
              {
                label: '采矿业',
                value: 2
              },
              {
                label: '制造业',
                value: 3
              },
              {
                label: '电力、燃气及水的生产和供应业',
                value: 4
              },
              {
                label: '建筑业',
                value: 5
              },
              {
                label: '交通运输、仓储和邮政业',
                value: 6
              },
              {
                label: '批发和零售业',
                value: 7
              },
              {
                label: '住宿和餐饮业',
                value: 8
              },
              {
                label: '金融业',
                value: 9
              },
              {
                label: '房地产业',
                value: 10
              }
            ]
          },
          {
            label: '企业规模',
            prop: 'gm',
            multiple: false,
            dicData: [
              {
                label: '50人以下',
                valie: 0
              },
              {
                label: '50-99人',
                valie: 1
              },
              {
                label: '99-200人',
                valie: 2
              },
              {
                label: '200-1000人',
                valie: 3
              },
              {
                label: '1000人以上',
                valie: 4
              }
            ]
          }
        ]
      },
      option: {
        menuWidth: 150,
        height: 'auto',
        addBtn: false,
        editBtn: false,
        delBtn: false,
        align: 'center',
        index: true,
        column: [
          {
            width: 250,
            label: '企业名称',
            fixed: true,
            prop: 'name',
            search: true
          },
          {
            width: 120,
            label: '普惠金融指数',
            prop: 'phjrzs'
          },
          {
            width: 120,
            label: '企业贡献指数',
            prop: 'qygx'
          },
          {
            width: 200,
            label: '综合业务饱和度指数',
            prop: 'zhyw'
          },
          {
            width: 180,
            label: '行业',
            prop: 'hy'
          },
          {
            label: '企业规模',
            prop: 'people',
            search: true
          },
          {
            label: '法人',
            prop: 'fr'
          },
          {
            width: 120,
            label: '注册资本',
            prop: 'zb',
            search: true
          }
        ]
      }
    }
  }
}
</script>

<style lang="scss">
.company {
  position: relative;

  &__extra {
    position: absolute;
    right: -20px;
    &-item {
      position: relative;
      padding: 0 32px;
      display: inline-block;
      &:last-child {
        &::after {
          display: none;
        }
      }
      &:after {
        background-color: #e8e8e8;
        position: absolute;
        top: 30px;
        right: 0;
        width: 1px;
        height: 40px;
        content: '';
      }
    }
    &-title {
      color: rgba(0, 0, 0, 0.45);
      font-size: 14px;
      line-height: 22px;
      margin-bottom: 4px;
    }
    &-subtitle {
      color: rgba(0, 0, 0, 0.85);
      font-size: 30px;
      line-height: 38px;
      margin: 0;
      padding-left: 10px;
      text-align: center;
      span {
        color: rgba(0, 0, 0, 0.45);
        font-size: 20px;
      }
    }
  }
  &__item {
    &-img {
      width: 80px;
      height: 80px;
      border-radius: 5px;
      overflow: hidden;
      border: 1px solid #ccc;
      box-sizing: border-box;
      img {
        width: 100%;
        height: 100%;
      }
    }
    &-header {
      margin-bottom: 20px;
      display: flex;
      align-items: flex-start;
    }
    &-info {
      padding: 0 20px;
    }
    &-title {
      margin-bottom: 10px;
      color: #333;
    }
    &-list {
      width: 200px;
      color: #666;
      font-size: 13px;
      span {
        line-height: 28px;
        margin-right: 15px;
      }
    }
    &-photo {
      margin: 0 0 20px 0;
      display: flex;
      img {
        margin-right: 20px;
        height: 8rem;
        border-radius: 5px;
        display: block;
      }
    }
    &-address {
      margin-bottom: 20px;
      font-size: 14px;
      color: #555;
    }
  }
}
</style>
